<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../import.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="../meta.jsp" %>
<%@include file="../script.jsp" %>
<link rel="stylesheet" type="text/css" href="resources/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="resources/css/zTreeIcons.css">
<style type="text/css">
.frameMenu {
	cursor: pointer;
}
/*
.frameMenu > div{仍有错位
 position: relative;
  top: 2px;
}*/
.frameMenu > span > img{min-width: 12px; max-width: 12px; min-height: 12px; max-height: 12px;  }
.frameMenu.children > div > a:hover{letter-spacing: 12px}
/* IE6 
.frameMenu.children div a:hover{letter-spacing: 12px}
*/
.foldIcoClose {
	  display:inline-block;
	  border-top:6px solid #fff;
	  border-bottom:6px solid #fff;
	  border-left:6px solid #000;
	  border-right:0px;
	  position:relative; left:1px; top:0;
	  }
.foldIcoOpen{
	  display:inline-block;
	  border-top:6px solid #000;
	  border-bottom:0px;
	  border-left:6px solid #fff;
	  border-right:6px solid #fff;
	  position:relative; left:1px; top:0;
}

#layout{
	width: 98%;
	margin: 0 auto;
	text-align: left;
}
#contentDomain{
	overflow: hidden;
}
#contentDomain .menuDomain{
	width: 20%;
	float: left;
	display: inline;
}
#contentDomain .mainDomain{
	width: 76%;
	padding-right: 0.5%;
	float: right;
	display: inline;
}
#contentDomain .mainDomain .primaryDomain{
	width: 80%;
	float: left;
	display: inline;
}
#contentDomain .mainDomain .secondaryDomain{
	width: 17%;
	padding-right: 1%;
	float: right;
	display: inline;
	overflow: hidden;
}
#footDomain{
	clear: right;
}



</style>
<title>frame_menu</title>
</head>
<body>
<div id="layout">
<h3>frame_menu</h3>
<div id="topDomain" style="border: 2px solid #000">
<h3>topDomain</h3>
<a href="login" target="frame_content">login.jsp in frame_content</a>
</div>
<%-- 
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
  --%>
  
<div id="contentDomain">

<div class="mainDomain" style="border: 2px solid #A52A2A">
<h3>mainDomain</h3>
<div class="primaryDomain" style="border: 2px solid #A52A2A">
<h3>primaryDomain</h3>
<iframe id="primaryDomain" frameborder="0" src="./login" scrolling="no"></iframe>
</div>
<div class="secondaryDomain" style="border: 2px solid #A52A2b">
<h3>secondaryDomain</h3>
<div id="console" style="color: red;"></div>
</div>
</div>

<div class="menuDomain" style="border: 2px solid #DEB887">
<h3>menuDomain</h3>
<div class="frameMenu" style="border: 2px solid #7FFF00"></div>
<div class="triangle"></div>
</div>
</div>

<div id="footDomain" style="border: 2px solid #FF4500">
<h3>footDomain</h3>
<input type="button" value="frames" onclick="javascript:test()">
</div>

</div>
</body>

<script type="text/javascript" src="resources/js/jquery-ztree-2.3.min.js"></script>
<script type="text/javascript">
/* 菜单初始化数据（JSON表示） */
var frameMenuInitJson = [
	{"id":"userManager", "title":"用户管理", "nodes":[
		{"title":"添加用户", "url":"#"},
		{"title":"添加用户2", "url":"#"}
	]},
	{"id":"resourcesManager", "title":"资源管理", "nodes":[
		{"title":"添加资源", "url":"#"}
	]},
	{"id":"department", "title":"部门设置", "nodes":[]}
];

(function($){
	var settings = {
		'type' : 'foldMenu'
	}
	/*
	折叠式菜单
	
	流程：
	1、获得菜单数据，初始化html，展示
	2、隐藏每个菜单项的子菜单，和其前面的三角符
	3、鼠标进入菜单域时，显示每个菜单项前面的三角符（打开的项目三角向下，关闭的项目三角向右）
	4、鼠标指向菜单项时，变色显示
	5、鼠标点击菜单项时，显示子菜单，并改变背景色和三角符向下显示
	6、鼠标指向子菜单项时，变色显示
	7、鼠标点击已打开的菜单项时，隐藏子菜单，并将三角符向右显示
	*/
	$.fn.foldMenu = function(){
		w
	};
})(jQuery );
</script>
<%-- 
<script type="text/javascript">

$("#primaryDomain").load(function(){
	var mainheight = $(this).contents().find("body").height()+30;
	$(this).height(mainheight);
	});
	
function test(){
	//$("#frameMenu").css("border", "0px");
	parent.document.getElementById("frameMenu").frameBorder = "0";
	parent.document.getElementById("frameMenu").marginWidth = "0";
	
	parent.document.getElementById("frameContent").frameBorder = "0";
	parent.document.getElementById("frameContent").marginWidth = "0";
	//alert(parent.document.getElementById("frameMenu").id);
}
$(document).ready(function(){
	frameMenuConstructor();
	$(".frameMenu > div[id] > div[class]").hide();
});

/* 菜单折叠状态对象 */
var frameMenuStatus = {
	_id: '',
	ids: [],
	open: [],
	close: [],
	icoOpen: function(){
		$('#'+ this._id).children("span").children("img").first().attr("src", "resources/images/menu-parent90.gif");
	},
	icoClose: function(){
		$('#'+ this._id).children("span").children("img").first().attr("src", "resources/images/menu-parent.gif");
	},
	icoNone: function(){
		$('#'+ this._id).children("span").children("img").first().hide();
	}
};

/* 菜单初始化数据（JSON表示） */
var frameMenuInitJson = [
	{"id":"userManager", "title":"用户管理", "nodes":[
		{"title":"添加用户", "url":"#"},
		{"title":"添加用户2", "url":"#"}
	]},
	{"id":"resourcesManager", "title":"资源管理", "nodes":[
		{"title":"添加资源", "url":"#"}
	]},
	{"id":"department", "title":"部门设置", "nodes":[]}
];

/* 菜单生成方法 */
function frameMenuConstructor(){
	var tmp = [];
	var i, j;
	for(i=0; i<frameMenuInitJson.length; i++){
		// 初始化创建列表时，将列表的id保存到折叠状态数组中
		frameMenuStatus.ids.push(frameMenuInitJson[i].id);
		tmp.push("<div id=\"");
		tmp.push(frameMenuInitJson[i].id);
		tmp.push("\">");
		//tmp.push("<span><img/></span>");
		tmp.push("<span></span>");
		tmp.push("<span style='position: relative; left: 12px;'>");
		tmp.push(frameMenuInitJson[i].title);
		tmp.push("</span>");
		if(frameMenuInitJson[i].nodes.length > 0){
			tmp.push("<div class='frameMenu children'>");
			for(j in frameMenuInitJson[i].nodes){
				tmp.push("<div>");
				tmp.push("<a href=\"");
				tmp.push(frameMenuInitJson[i].nodes[j].url);
				tmp.push("\">");
				tmp.push(frameMenuInitJson[i].nodes[j].title);
				tmp.push("</a>");
				tmp.push("</div>");
			}
			tmp.push("</div>");
		}
		tmp.push("</div>");
	}
	$(".frameMenu").append(tmp.join(''));
};

/* 给菜单绑定鼠标点击事件，用来转换主功能标题左边的图片表示 */
$(".frameMenu > div[id] > span").live({
  click: function(){
  var _value = $(this).parent().attr("id");
  var arrOpen = frameMenuStatus.open;
  
  if($.inArray(_value, arrOpen) == -1){
  	frameMenuStatus.open.push(_value);
  	arrOpen = frameMenuStatus.open;
  	$(this).next("div").fadeIn("slow");
  	frameMenuStatus._id = _value;
	frameMenuStatus.icoOpen(frameMenuStatus._id);
  	
  } else if($.inArray(_value, arrOpen) > -1){
  	frameMenuStatus.open = $.grep(arrOpen, function(n, i){
  				return n == _value;
  			}, true);
  	$(this).next("div").fadeOut("slow");
  	frameMenuStatus._id = _value;
	frameMenuStatus.icoClose(frameMenuStatus._id);
  	
  } else if($.inArray(_value, arrOpen) == -1){
  	frameMenuStatus.open = $.grep(arrOpen, function(n, i){
  				return n == _value;
  			}, false);
  	$(this).next("div").fadeIn("slow");
  	frameMenuStatus._id = _value;
	frameMenuStatus.icoOpen(frameMenuStatus._id);
  }
	$("#console").text(frameMenuStatus.open.toString());  

  }
});

//给子菜单中的每一项绑定鼠标事件
$("div[class]:visible > div:has(a)").live({
	mouseover: function(){
		$(this).css("background", "#FFD700");
		//$("#console").text($(this).text());
	},
	mouseout: function(){
		$(this).css({background: "transparent"});
	}
});

/* 给菜单绑定鼠标事件，用来显示主功能标题左边的图片 background: transparent; border: none; text-indent: 2em;*/
$(".frameMenu > div[id]").live({
  mouseover: function(){
  	  // 父div的style，这里设置相对定位top:2px，是因为当上一个父div中的子菜单打开后，其最后一项和下一个的父div贴的太近，故设置2px拉开距离
  	  $(this).css({background: "#F3FAFC", border: "1px solid #A9DEED"});
	  $(this).children("div[class]").css({position: "relative", top: "2px",  "text-indent": "2em"}); //子菜单取消继承自父div的style
	  //$(this).parent().find("img").show(); //显示折叠ico图片标签
	  $(this).parent().children("div[id]").find("span:eq(0)").addClass("foldIcoClose");
	  $(this).parent().children("div[id]").find("span:eq(1)").css("left", "6px"); //折叠ico此时会出现，宽度是12px，而span原设定的相对定位left是12px，因此两者需要抵消
	  
	  //$("#console").text($(this).html());
	  
	  var n;
	  /*
	  for(n=0; n<frameMenuStatus.ids.length; n++){
		  frameMenuStatus._id = frameMenuStatus.ids[n];
		  //frameMenuStatus.icoClose(frameMenuStatus._id);
	  }*/
	  
  for(m=0; n<frameMenuStatus.open.length; n++){
	  frameMenuStatus._id = frameMenuStatus.open[n];
	  //frameMenuStatus.icoOpen(frameMenuStatus._id);
	  $("#"+frameMenuStatus._id).children("span:eq(0)").addClass("foldIcoOpen");
  }
  	},
  mouseout: function(){
	 $(this).css({background:"transparent", border:"none"});
	 $(".frameMenu > div[id] > span[style]").css("left", "12px");
	 
	 //$(this).parent().find("img").hide();
	 $(this).parent().children("div[id]").find("span:eq(0)").removeClass("foldIcoClose");
  }
});

/*
var setting = {
    showLine: true,
    checkable: false
};

var zTreeNodes = [
    { "name":"google", "url":"http://g.cn", "target":"_blank"},
    { "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
    { "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
];

var zTreeNodes1 = [
    {"id":1, "name":"用户管理", "nodes":[
      {"id":11, "name":"test11", "nodes":[
        {"id":111, "name":"test111"}
      ]},
      {"id":12, "name":"test12"}
    ]},
    {"id":2, "name":"资源管理", "nodes":[
      {"id":21, "name":"test21", "nodes":[
        {"id":221, "name":"test221"}
      ]},
      {"id":22, "name":"test22"}
    ]},
];

var zTree = $("#tree").zTree(setting, zTreeNodes1);
*/
</script>
 --%>
 
</html>